<template>
  <erp-modal
    :title="title"
    :visible="visible"
    :loading="loading"
    @close="handleClose"
  >
    <erp-business-form
      ref="businessForm"
      :visible="visible"
      :approve-type="approveType"
      :title="title"
      :is-new-record="isNewRecord"
      :is-copy="isCopy"
      :editable="editable"
      :options="options"
      :query="query"
      :showBoolean="showBoolean"
      @change-loading="handleChangeLoading"
      @update-approve-count="handleUpdateApproveCount"
      @refresh="handleRefresh"
      @close="handleClose"
    />

    <template #footer>
      <template v-for="(item, index) in footButtons">
        <el-button
          :key="index"
          class="foot-btn"
          v-bind="item.prop"
          :type="item.prop && item.prop.type ? item.prop.type : 'primary'"
          :disabled="item.disabled"
          @click="handleClickFootButton(item)"
        >
          {{ item.text }}
        </el-button>
      </template>
    </template>
  </erp-modal>
</template>

<script>
import ErpModal from '@/components/erp/ErpModal/ErpModal';
import ErpBusinessForm from '@/components/erp/ErpBusinessForm';
/**
 * 主从表单弹窗
 * @author maolin
 */
export default {
  name: "ErpBusinessModal",
  components: {
    ErpModal,
    ErpBusinessForm,
  },
  props: {
    /**
     * 审批状态
     * @public
     */
    approveType: {
      type: [Number, String],
      default: ''
    },
    /**
     * 标题
     * @public
     */
    title: {
      type: String,
      default: ''
    },
    /**
     * 是否显示
     * @public
     */
    visible: {
      type: Boolean,
      default: false 
    },
    /**
     * 是否是新纪录
     * @public
     */
    isNewRecord: {
      type: Boolean,
      default: true
    },
    /**
     * 是否是复制
     * @public
     */
    isCopy: {
      type: Boolean,
      default: false
    },
    /**
     * 从表是否可编辑
     * @public
     */
    editable: {
      type: Boolean,
      default: true
    },
    /**
     * 表单配置对象
     * @public
     */
    options: {
      type: Object,
      default () {
        return {};
      }
    },
    /**
     * 额外参数对象
     * @public
     */
    query: {
      type: Object,
      default () {
        return {};
      }
    },

    /**
     * 动态控制显示隐藏表单组件
     * @public
     */
    showBoolean:{
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      visibleFlag: false,
      loading: false,
    };
  },
  computed: {
    footButtons () {
      let buttons = this.options && this.options.buttons ? this.options.buttons : [];
      buttons = buttons.map(item => {
        let disabled = false;
        if (item.disabledFunction) {
          try{
            disabled = item.disabledFunction({query: this.query});
          }catch (e) {
            console.log(e);
          }
        }
        item.disabled = disabled;
        return item;
      });
      return buttons.filter(item => {
        return item.position === 'foot';
      });
    },
  },
  watch: {
  },
  created() {
  },
  mounted() {
  },
  methods: {
    /**
     * 通知父组件更新待审批订单数
     * @public
     */
    handleUpdateApproveCount () {
      /**
       * 通知父组件更新待审批订单数
       * @public
       */
      this.$emit('update-approve-count');
    },
    /**
     * 通知父组件关闭弹窗
     * @public
     */
    handleClose () {
      /**
       * 通知父组件关闭弹窗
       * @public
       */
      this.$emit('close');
    },
    /**
     * 点击表单底部按钮
     * @param {object} button 按钮对象
     * @public
     */
    handleClickFootButton (button) {
      console.log(button)
      this.$refs.businessForm.handleClickFootButton(button);
    },
    /**
     * 更新表单加载状态
     * @param {boolean} loading 是否加载中
     * @public
     */
    handleChangeLoading (loading) {
      this.loading = loading;
    },
    /**
     * 通知父组件刷新列表
     * @public
     */
    handleRefresh () {
      /**
       * 通知父组件刷新列表
       * @public
       */
      this.$emit('refresh');
    }
  },
};
</script>

<style lang="scss" scoped>
</style>
